<template>
  <div class="content-test">
    <van-sidebar v-if="!isSearching" v-model="active">
      <van-sidebar-item 
          v-for="item in findAllSideTypes" 
          :key="item.sidebarId" 
          :title="item.sidebarName" 
          @click="sendSidebar(item)"
      />
    </van-sidebar>
    <Service />
  </div>
</template>

<script name="ContentTest" setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { getFindSideTypes } from '../api'
import { emitter } from '../utils/eventBus'
 import Service from './Service.vue';
const props = defineProps(['isSearching'])
const findAllSideTypes = ref([])
const active = ref(0)

const onChange = (index) => showToast()

const getList = async (serviceType) => {
  // console.log('serviceType', serviceType.serviceType)
  try {
    let ret = await getFindSideTypes(serviceType.serviceType)
    findAllSideTypes.value = ret
    // console.log('findAllSideTypes', findAllSideTypes.value)


    //默认传递二级菜单的第一条记录 名称
    // console.log('####', findAllSideTypes.value[0].sidebarName)
    sendSidebar(findAllSideTypes.value[0])
  } catch (e) {
    console.log(e)
  }
}

onMounted(() => {
  emitter.on('service-type-name', (message) => {
    // console.log("service-type-name@@",message.serviceType)
    getList({ serviceType: message.serviceType })
  })
  getList({ serviceType: '上门安装' })
})
function sendSidebar(item) {
  emitter.emit("sidebar-type-name", {
    sidebarName: item.sidebarName
  });
    // console.log("selected item@@", item.sidebarName);
}


// 监听重置事件
emitter.on('reset-sidebar-active', () => {
  active.value = 0;
});
</script>

<style lang='less' scoped>
.content-test {
  display: flex;
  height: 100vh;
}

.sidebar-container {
  display: flex;
  height: 100vh;
}

/* 侧边栏固定宽度并填充高度 */
.van-sidebar {
  width: 75px;
  height: 100%;
  background-color: #f7f8fa;
  /* Vant默认灰色背景 */
  overflow-y: auto;
  /* 支持内容滚动 */
}

/* 每个菜单项设置为块级元素 */
.van-sidebar-item {
  display: block;
  padding: 15px 0;
  text-align: center;
  border-bottom: 1px solid #ebedf0;
}
</style>